<template>
	<div class="container">
		<el-row style="margin-bottom: 15px;">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>帮买取快递废品回收</el-breadcrumb-item>
				<el-breadcrumb-item>门店管理</el-breadcrumb-item>
			</el-breadcrumb>
		</el-row>
		<el-row>
			<el-form inline :model="formInline" style="height: 60px;">

				<el-form-item label="门店名称">
					<el-input v-model="formInline.keyword" clearable @clear='queryInfo'></el-input>
				</el-form-item>

				<el-form-item label="门店手机号">
					<el-input v-model="formInline.phone" clearable @clear='queryInfo'></el-input>
				</el-form-item>

				<el-form-item label="提交日期">
					<el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" clearable @clear='queryInfo'>
					</el-date-picker>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="queryInfo">查询</el-button>
				</el-form-item>

			</el-form>

		</el-row>



		<el-row style="margin-bottom:10px;">

			<el-radio-group v-model="shopStatus" size="medium" style="margin-right: 20px;">

				<el-radio-button label="全部门店"></el-radio-button>
				<el-radio-button label="上架中"></el-radio-button>
				<el-radio-button label="已下架"></el-radio-button>

			</el-radio-group>

			<el-button type="primary" size="medium" @click="addStore()">新增门店</el-button>

			<el-dialog :title="title" :visible.sync="dialogFormVisible">
				<el-form :model="form">
					<el-form-item label="门店名称" :label-width="formLabelWidth">
						<el-input v-model="form.shopName" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="门店手机号" :label-width="formLabelWidth">
						<el-input v-model="form.shopPhone" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="营业时间" :label-width="formLabelWidth">
						<el-input v-model="form.shopDescribe" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="所属地区" :label-width="formLabelWidth">
						<el-cascader v-model="address" :options="citydata" :props="{ expandTrigger: 'hover' }">
						</el-cascader>
					</el-form-item>
					<el-form-item label="" :label-width="formLabelWidth">
						<el-input v-model="form.shopAddress" autocomplete="off" placeholder="请填写详细地址"></el-input>
					</el-form-item>
					<el-form-item label="小区位置" :label-width="formLabelWidth">
						<el-button @click="sendAddress">获取位置</el-button>
						<span v-show="form.shopLatitude">{{form.shopLatitude}},{{form.shopLongitude}}
						</span>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="cancle">取 消</el-button>
					<el-button type="primary" @click="addOrUpdate()">确 定</el-button>
				</div>
			</el-dialog>

		</el-row>

		<!--  -->
		<el-row>
			<el-table border :data='list' style="width: 100%;margin-bottom: 20px;" :header-cell-style='headerCellStyle'>
				<el-table-column prop="shopName" label="门店"></el-table-column>
				<el-table-column prop="shopId" label="id"></el-table-column>
				<el-table-column prop="shopPhone" label="门店手机号"></el-table-column>
				<el-table-column prop="shopAddress" label="门店地址"></el-table-column>
				<el-table-column prop="shopDescribe" label="营业时间"></el-table-column>
				<!-- <el-table-column prop="createTime" label="关联小区"></el-table-column> -->
				<el-table-column prop="shopOrderCount" label="订单总数"></el-table-column>
				<!-- <el-table-column prop="createTime" label="提交方式"></el-table-column> -->
				<el-table-column label="状态">
					<template slot-scope="scope">
						<el-tag
							:type="scope.row.shopStatus==1?'success':'danger'">{{scope.row.shopStatus==1?'上架中':'已下架'}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作">

					<template slot-scope="scope">
						<el-link type="primary" :underline='false' @click="modifyShop(scope.row)">编辑门店资料</el-link>
					</template>

				</el-table-column>
			</el-table>
		</el-row>
		<el-row>

			<el-pagination :current-page="formInline.pageNum" :page-sizes="[5, 10, 15, 20]"
				:page-size="formInline.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
				@size-change="handleSizeChange" @current-change="handleCurrentChange">
			</el-pagination>

		</el-row>


	</div>
</template>

<script>
	import citydata from '@/assets/citydata.js'
	export default {
		data() {
			return {
				dialogFormVisible: false,
				title: '新增门店',
				address: [],
				resMessage: '添加',
				formLabelWidth: '120px',
				citydata: citydata,

				form: {
					shopAddress: "",
					shopCity: "",
					shopDescribe: "",
					shopDistrict: "",
					shopImage: "",
					shopLatitude: "",
					shopLongitude: "",
					shopName: "",
					shopPhone: "",
					shopProvince: ""
				},

				formInline: {
					startTime: '',
					endTime: '',
					pageNum: 1,
					pageSize: 5,
					keyword: '',
					phone: '',
					shopStatus: ''
				},
				total: 10,
				list: [],
				date: '',
				shopStatus: '全部门店',
				headerCellStyle: {
					'text-align': 'center',
					'line-height': '30px',
					backgroundColor: '#409EFF',
					color: '#fff'
				},


			}
		},
		methods: {
			modifyShop(rowDate) {
				this.title = '编辑门店'
				this.resMessage = '修改'
				this.form = rowDate
				this.address = [this.form.shopProvince, this.form.shopCity, this.form.shopDescribe]
				this.dialogFormVisible = true
			},

			handleSizeChange(val) {
				this.formInline.pageSize = val
				this.formInline.pageNum = 1
				this.queryInfo()
			},
			handleCurrentChange(val) {
				this.formInline.pageNum = val
				this.queryInfo()
			},
			queryInfo() {
				this.$http('shop/querySearchShopList', {
						params: this.formInline
					})
					.then(res => {
						if (res.status == 200) {
							this.list = res.data.data.list
							this.total = res.data.data.total
						} else {
							this.$message({
								type: 'error',
								showClose: 'true',
								message: '服务器请求失败！'
							})
						}
					})
					.catch(() => {
						this.$message({
							type: 'error',
							showClose: 'true',
							message: '服务器异常！'
						})
					})
			},
			cancle() {
				this.dialogFormVisible = false
				this.address = [];
				this.form = {
					shopAddress: "",
					shopCity: "",
					shopDescribe: "",
					shopDistrict: "",
					shopImage: "",
					shopLatitude: "",
					shopLongitude: "",
					shopName: "",
					shopPhone: "",
					shopProvince: ""
				}
			},

			addStore() {

				this.resMessage = '添加',
					this.title = '新增门店',
					this.dialogFormVisible = true

			},
			sendAddress() {

				if (this.address.length == 0) {
					this.$message({
						type: 'error',
						showClose: 'true',
						message: '请选择地区'
					})
				} else if (!this.form.shopAddress) {
					this.$message({
						type: 'error',
						showClose: 'true',
						message: '请填写详细地址'
					})
				} else {
					let advalue = this.form.shopProvince + this.form.shopCity + this.form.shopDistrict +
						this.form.shopAddress
					this.$http.get('https://restapi.amap.com/v3/geocode/geo', {
							params: {
								key: '457886b5972a97e93fb9cdccebfd450f',
								'address': advalue
							}
						}).then(res => {
							if (res.status == 200) {
								let location = res.data.geocodes[0].location.split(',')
								this.form.shopLatitude = location[0]
								this.form.shopLongitude = location[1]
							}

						})
						.catch(() => {
							this.$message({
								type: 'error',
								showClose: 'true',
								message: '服务器异常'
							})
						})
				}
			},
			addOrUpdate() {
				if (this.title == '新增门店') {
					this.$http.post('/shop/addShop', this.form)
						.then(res => {
							if (res.status == 200) {
								this.$message({
									type: 'success',
									showClose: true,
									message: this.resMessage + '成功'
								})
								this.queryInfo()
								this.cancle()
							} else {
								this.$message({
									type: 'error',
									showClose: true,
									message: this.resMessage + '失败'
								})
							}
						})
						.catch(() => {
							this.$message({
								type: 'error',
								showClose: true,
								message: '服务器异常'
							})
						})
				} else {
					this.$http.post('/shop/modifyShop', this.form)
						.then(res => {
							if (res.status == 200) {
								this.$message({
									type: 'success',
									showClose: true,
									message: this.resMessage + '成功'
								})
								this.queryInfo()
								this.cancle()
							} else {
								this.$message({
									type: 'error',
									showClose: true,
									message: this.resMessage + '失败'
								})
							}
						})
						.catch(() => {
							this.$message({
								type: 'error',
								showClose: true,
								message: '服务器异常'
							})
						})
				}

			}
		},





		mounted() {
			this.queryInfo()
		},
		watch: {
			date(newDate) {
				this.formInline.startTime = newDate[0]
				this.formInline.endTime = newDate[1]
			},
			shopStatus(newStatus) {
				if (newStatus == '全部门店') {
					this.formInline.shopStatus = ''
					this.queryInfo()
				} else if (newStatus == '上架中') {
					this.formInline.shopStatus = 1
					this.queryInfo()
				} else {
					this.formInline.shopStatus = 0
					this.queryInfo()
				}
			},
			address() {
				this.form.shopProvince = this.address[0];
				this.form.shopCity = this.address[1];
				this.form.shopDistrict = this.address[2];
			}
		}
	}
</script>

<style>
</style>